<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar title="医疗提醒" left-icon="back" @clickLeft="onBack" right-icon="plus"
      @clickRight="addReminder"></uni-nav-bar>

    <!-- 提醒分类标签 -->
    <view class="tab-container">
      <scroll-view scroll-x class="tab-scroll">
        <view class="tab-wrapper">
          <view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: activeTab === index }"
            @click="switchTab(index)">
            <text class="tab-text">{{ tab.name }}</text>
            <view class="tab-indicator" v-if="activeTab === index"></view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 提醒列表 -->
    <view class="reminder-list">
      <!-- 今日提醒 -->
      <view class="section-title" v-if="filteredReminders.length > 0">
        <text class="title-text">今日提醒</text>
      </view>

      <!-- 提醒项 -->
      <view v-for="(reminder, index) in filteredReminders" :key="reminder.id" class="reminder-item"
        :class="{ overdue: reminder.overdue && !reminder.completed }">
        <!-- 提醒类型标签 -->
        <view class="reminder-tag" :style="{ backgroundColor: reminder.typeColor }">
          <uni-icons :type="reminder.typeIcon" size="18" color="#fff"></uni-icons>
          <text class="tag-text">{{ reminder.typeText }}</text>
        </view>

        <!-- 提醒内容 -->
        <view class="reminder-content">
          <view class="content-header">
            <text class="reminder-title">{{ reminder.title }}</text>
            <text class="reminder-time">{{ reminder.time }}</text>
          </view>
          <text class="reminder-desc">{{ reminder.description }}</text>

          <!-- 重复信息 -->
          <view class="repeat-info" v-if="reminder.repeat">
            <uni-icons type="refresh" size="16" color="#888"></uni-icons>
            <text class="repeat-text">{{ getRepeatText(reminder.repeat) }}</text>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="reminder-actions">
          <view class="action-checkbox" :class="{ checked: reminder.completed }" @click="toggleComplete(reminder.id)">
            <uni-icons type="checkmark" size="20" color="#fff" v-if="reminder.completed"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredReminders.length === 0">
        <uni-icons type="clock" size="60" color="#ccc"></uni-icons>
        <text class="empty-text">暂无{{ tabs[activeTab].name }}提醒</text>
        <button class="add-button" @click="addReminder">+ 添加新提醒</button>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/api/index.js';
export default {
  data() {
    return {
      // 提醒分类标签
      tabs: [
        { name: '全部', type: 'all' },
        { name: '服药', type: 'medicine' },
        { name: '复诊', type: 'followup' },
        { name: '检查', type: 'examination' },
        { name: '其他', type: 'other' }
      ],
      activeTab: 0,

      // 提醒数据
      reminders: [ ]
    };
  },

  computed: {
    // 根据当前标签筛选提醒
    filteredReminders() {
      if (this.activeTab === 0) { // 全部
        return this.reminders;
      }
      const type = this.tabs[this.activeTab].type;
      return this.reminders.filter(reminder => reminder.type === type);
    }
  },

  methods: {
    // 返回上一页
    onBack() {
      uni.navigateBack();
    },

    // 切换标签
    switchTab(index) {
      this.activeTab = index;
    },

    // 切换完成状态
    toggleComplete(id) {
      const reminder = this.reminders.find(item => item.id === id);
      if (reminder) {
        reminder.completed = !reminder.completed;
        // 实际应用中这里应该有保存到服务器或本地存储的逻辑
      }
    },

    // 添加新提醒
    addReminder() {
      // 跳转到添加提醒页面
      uni.navigateTo({
        url: '/pages/reminder/addReminder'
      });
    },

    // 获取重复文本描述
    getRepeatText(repeatType) {
      const repeatMap = {
        'none': '不重复',
        'daily': '每天',
        'weekly': '每周',
        'monthly': '每月',
        'workday': '工作日'
      };
      return repeatMap[repeatType] || '自定义';
    },
    async getreminders() {
      try {
        const res = await api.getRemindersApi();
        this.reminders = res.data;
      } catch (error) {
        console.log('用药提醒数据获取失败',error);
      }
    }
  },
  onLoad() {
    this.getreminders();
  }
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 标签样式 */
.tab-container {
  background-color: #fff;
  padding: 10rpx 0;
  border-bottom: 1px solid #eee;
}

.tab-scroll {
  white-space: nowrap;
  padding: 0 20rpx;
}

.tab-wrapper {
  display: inline-flex;
  gap: 30rpx;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 5rpx;
}

.tab-text {
  font-size: 28rpx;
  color: #666;
}

.tab-item.active .tab-text {
  color: #007aff;
  font-weight: 500;
}

.tab-indicator {
  width: 40rpx;
  height: 6rpx;
  background-color: #007aff;
  border-radius: 3rpx;
  margin-top: 8rpx;
}

/* 提醒列表样式 */
.reminder-list {
  padding: 20rpx;
}

.title-text {
  font-size: 26rpx;
  color: #888;
  font-weight: 500;
}

.reminder-item {
  display: flex;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 15rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  align-items: center;
}

/* 过期样式 */
.reminder-item.overdue {
  background-color: #fff8f8;
}

/* 提醒类型标签 */
.reminder-tag {
  display: flex;
  align-items: center;
  padding: 8rpx 15rpx;
  border-radius: 20rpx;
  margin-right: 15rpx;
  white-space: nowrap;
}

.tag-text {
  font-size: 22rpx;
  color: #fff;
  margin-left: 5rpx;
}

/* 提醒内容 */
.reminder-content {
  flex: 1;
  min-width: 0;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5rpx;
}

.reminder-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400rpx;
}

.reminder-item.overdue .reminder-title {
  color: #f53f3f;
}

.reminder-time {
  font-size: 24rpx;
  color: #888;
}

.reminder-desc {
  font-size: 24rpx;
  color: #666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.4;
}

.repeat-info {
  display: flex;
  align-items: center;
  margin-top: 8rpx;
}

.repeat-text {
  font-size: 22rpx;
  color: #888;
  margin-left: 5rpx;
}

/* 操作按钮 */
.reminder-actions {
  display: flex;
  align-items: center;
  margin-left: 10rpx;
}

.action-checkbox {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border: 2rpx solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-checkbox.checked {
  background-color: #00b42a;
  border-color: #00b42a;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #888;
  margin: 30rpx 0;
}

.add-button {
  background-color: #007aff;
  color: #fff;
  border-radius: 50rpx;
  padding: 15rpx 40rpx;
  font-size: 28rpx;
}
</style>
